<template>
<!-- 登录 -->
  <div class="container">
    <v-header :title="title"></v-header>

    <div class="bar"></div>

    <div class="content">
      <form class="mui-input-group">
        <div class="mui-input-row phone">
          <span>手机号</span>
          <div class="input-box">
            <input type="number" class="mui-input-clear" placeholder="请输入手机号码" maxlength="11" v-model="userPhone">
          </div>
        </div>
        <div class="mui-input-row code">
          <span>验证码</span>
          <div class="input-box">
            <input type="number" placeholder="请输入验证码" maxlength="4" v-model="code">
            <div class="getCode" @click="getCode" >{{codeMsg}}</div>
          </div>
        </div>
      </form>

      <div class="bar"></div>

      <form class="mui-input-group">
        <div class="mui-input-row username">
          <span>用户名</span>
          <div class="input-box">
            <input type="text" class="mui-input-clear" placeholder="请输入用户名" maxlength="8" v-model="userName">
          </div>
        </div>
        <div class="mui-input-row password">
          <span>密码</span>
          <div class="input-box">
            <input type="password" class="mui-input-password" placeholder="6-20位" maxlength="20" v-model="password">
          </div>
        </div>

        <P class="tip">密码格式为6-20位数字、字母组合，不能包含特殊字符</P>

        <div class="mui-button-row">
          <button type="button" class="mui-btn confirm-btn" @click="register" >确定</button>
        </div>
      </form>
    </div>

    <v-mask :show="isShowLoading">
      <loading :msg="loadingMsg"></loading>
    </v-mask>

  </div>
</template>

<script type="text/ecmascript-6">

import VHeader from 'components/v-header'
import VMask from 'components/v-mask'
import Loading from 'components/loading'

import { ERR_OK } from 'api/config.js'
import { register, getCode  } from 'api/user.js'

import { passwordReg } from 'common/js/util.js'

export default {
  data() {
    return {
      title: '注册',
      userPhone: '',
      code: '',
      codeMsg:'发送验证码',
      sendingCode: false,
      userName: '',
      password: '',
      isShowLoading: false,
      loadingMsg: '注册中'
    }
  },
  components: {
    VHeader,
    VMask,
    Loading
  },
  mounted() {
    mui('.mui-input-row input').input();
  },
  methods: {
    getCode: function () {
      if (!this.sendingCode) {
        this.sendingCode = true
        let s = 60
        let timer = setInterval(() => {
          this.disable = true
          this.codeMsg = `已发送（${s}s）`
          s--
          if (s < 0) {
            this.sendingCode = false
            this.codeMsg = '重新发送'
            clearInterval(timer)
          }
        },1000)
        
        getCode({
          userPhone: this.userPhone
        }).then((res) => {
          if (res.code == ERR_OK) {
            
          } else {

          }
        })
      }
    },  

    register: function () {

      if (this.userPhone && this.code && this.userName && this.password) {
        if (passwordReg(this.password)) {
          this.isShowLoading = true
          register({
            userName: this.userName,
            userPhone: this.userPhone,
            password: this.password,
            code: this.code
          }).then((res) => {
            console.log(res)
            this.isShowLoading = false
            if (res.code == ERR_OK) {
              mui.toast('注册成功')
              this.$router.push({
                path: '/login'
              })
            } else {
              mui.toast(res.object)
            }
          }).catch((res) => {
            console.log(res)
            this.isShowLoading = false
          })  
        } else {
          mui.toast('密码格式不对')
        }
      }
    },
  }
}
</script>

<style scoped lang="stylus">

@import '../common/stylus/mixin.styl'
@import '../common/stylus/variable.styl'

.container
  position fixed
  width 100%
  height 100%
  background-color #fff
  .bar
    width 100%
    height 20px
    background-color #f2f2f2
  .content
    form
      margin 0 30px
      .phone, .code, .username, .password
        display flex
        align-items center
        height 50px
        font-size $font-size-medium
        span 
          display block
          width 55px
          color #999999
          line-height 1
        .input-box
          position relative
          flex 1 
          input 
            width 100%
            height 50px
            padding-left 10px
            &::placeholder
              font-size $font-size-small
          .getCode
            position absolute
            top 50%
            transform translateY(-50%) 
            right 0
            padding 5px 8px
            line-height 1
            border-radius 14px
            border 1px solid $color-theme
            color $color-theme
            font-size $font-size-small-s
            background-color #fff
      .phone, .username, .password  
        border-bottom-1px(#ccc) 
      .tip
        width 100%
        margin-top 18px
        text-align center
        font-size $font-size-small-s
        color #999999
      .confirm-btn
        width 100%
        height 45px
        margin-top 40px
        background-color $color-theme
        color #fff


</style>
